Flight generator で簡単 Flight Web アプリ～インストール編～

#JavaScript

稲毛透

2013.09.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。クラスメソッドの稲毛です。

開発を始める際、フォルダ構成等も含めたアプリケーションの雛形を用意するのは意外に面倒ですよね。
「 Flight generator 」は、 Twitter 製 JavaScript フレームワーク「 Flight 」を用いたブランクアプリケーションを生成してくれるツールです。 Flight フレームワークと依存関係にある JavaScript ライブラリを用意するだけでなく、テストフレームワーク等も併せて提供してくれます。

今回は、Flight generator のインストールとブランクアプリケーションの生成までを試してみました。

環境について

npm が動作することが前提なので、 MacOSX, Linux(Ubuntu), Windows のそれぞれについて利用できることを確認しました。（ 2013/09/13 時点）

Node.js のインストール

Flight generator は、 npm を用いてインストールするので Node.js が必要となります。インストールされていない場合は下記の要領で Node.js をインストールします。

OS	インストール方法
MacOSX	インストーラをダウンロードして実行します。
Linux(Ubuntu)	パッケージマネージャを利用してインストールします。
Windows	インストーラをダウンロードして実行します。

Git のインストール

Flight generator の依存ライブラリには GitHub で公開されているものが含まれている為、 git コマンドが有効である必要があります。インストールされていない場合は下記の要領で Git をインストールします。

OS	インストール方法
MacOSX	インストーラをダウンロードして実行します。
Linux(Ubuntu)	パッケージマネージャを利用してインストールします。
Windows	インストーラをダウンロードして実行します。

Flight generator のインストール

Flight generator を npm でグローバルインストールします。

$ sudo npm install -g generator-flight

Flight generator の中核となる「 Yeoman generator 」や他のツール群も同時にインストールされるのでとてもお手軽です。

ブランクアプリの生成

Flight Generator は Yeoman generator で構築されているので、 yo コマンドを用いて Flight のブランクアプリを生成します。生成はカレントディレクトリに対して行われるので、予めアプリ用にディレクトリを用意しそれをカレントディレクトリとしてから生成を行います。

$ mkdir flight-app
$ cd flight-app
$ yo flight

「 Normalize.css 」と「 Bootstrap CSS 」をそれぞれ含めるかどうかを問われるので、必要に応じて指定します。

生成物

下記のような構成でブランクアプリケーションが生成されます。

flight-app
│  .bowerrc
│  .gitattributes
│  .gitignore
│  .jshintrc
│  .travis.yml
│  bower.json
│  CHANGELOG.md
│  CONTRIBUTING.md
│  karma.conf.js
│  LICENSE.md
│  package.json
│  README.md
│  
├─app
│  │  404.html
│  │  favicon.ico
│  │  index.html
│  │  robots.txt
│  │  
│  ├─bower_components
│  │  ├─es5-shim
│  │  ├─flight
│  │  ├─jasmine-flight
│  │  ├─jasmine-jquery
│  │  ├─jquery
│  │  └─requirejs
│  ├─css
│  │      bootstrap.css
│  │      main.css
│  │      
│  ├─img
│  └─js
│      │  main.js
│      │  
│      ├─component
│      │      example.js
│      │      
│      └─page
│              default.js
│              
├─node_modules
└─test
    │  test-main.js
    │  
    └─spec
        └─component

app フォルダ: Web アプリケーション本体です。 bower_components 内に Flight フレームワーク依存の JavaScript ライブラリが用意されます。
test フォルダ: Flight フレームワークを構成する「 Component 」や「 Mixin 」モジュールをテストするためのテストファイルが格納されます。

注意点

生成された index.html の script タグでソースへの参照が絶対パスとなっています。
ローカルで動作させたい等の場合には適宜相対パスへの変更が必要なのでご注意ください。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>flight-app</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>

    Hello world

    <!--[if lt IE 9]>
    <script src="/bower_components/es5-shim/es5-shim.js"></script>
    <script src="/bower_components/es5-shim/es5-sham.js"></script>
    <![endif]-->
    <script src="/bower_components/jquery/jquery.js"></script>
    <script src="/bower_components/requirejs/require.js" data-main="/js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>
  </body>
</html>

index.html をブラウザで開いた結果、ブラウザコンソールへ下記のように出力されていれば正しく Flight フレームワークがロードされています。

Booting in DEBUG mode
You can configure event logging with DEBUG.events.logAll()/logNone()/logByName()/logByAction()

まとめ

Flight generator を用いることで実質数行のコマンド発行でブランクプロジェクトを用意できます。これによりアプリケーション開発をスムースに始められることと思います。
次回は、Flight generator で用意されたテスト環境（ Karma Test Runner ）を利用して、開発を進めてみようと考えています。